/**
 * 创建一个自定义指令，这样我就不必生成一个充满数字的数组来创建页面导航按钮。
 * Angular提供了大量的内置指令，但创建自己的指令来解决应用特有的问题，
 * 或者支持内置指令没有的特性
 */
import { Directive, Input, SimpleChange, TemplateRef, ViewContainerRef } from "@angular/core";

@Directive({
    selector: "[counterOf]"
})
export class CounterDirective {
    constructor(private container: ViewContainerRef,
        private template: TemplateRef<Object>) { }

    @Input("counterOf") counter: number;

    ngOnChanges(changes: SimpleChange) {
        this.container.clear();
        for (let i = 0; i < this.counter; i++) {
            this.container.createEmbeddedView(this.template,
                new CounterDirectiveContext(i + 1));
        }
    }
}

class CounterDirectiveContext {
    constructor(public $implicit: any) { }
}